<template>
	<view class="page-container">
      <view class="page-head" :style="pageStyleLayout.headStyle"></view>
      <view class="page-body" :style="pageStyleLayout.bodyStyle">
        <view class="scroll-body" :style="moveStyle">
          <view class="refresh-height" :style="pageStyleLayout.refreshStyle"
          >
            <view :class="refresh?'refresh-icon refreshing':'refresh-icon'" :style="refreshingStyle"></view>
          </view>
          <app-touch @move="move" @moveEnd="moveEnd">
            <slot></slot>
          </app-touch>
        </view>
      </view>
      <view class="page-foot" :style="pageStyleLayout.footStyle">></view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue'
import {getElementStyle} from "@/util/PageUtil";
const props = defineProps({
  headHeight: {
    type: String,
    default: '100rpx',
    descriptors: '头高度'
  },
  footHeight: {
    type: String,
    default: '200rpx',
    descriptors: '底部高度'
  },
  refreshHeight: {
    type: String,
    default: '200rpx',
    descriptors: '刷新高度'
  },
  onRefresh: {
    type: Function,
    required: false
  }
});

const pageStyleLayout = ref({
  headStyle: `height:${props.headHeight};`,
  bodyStyle:`height: calc(100vh - ${props.headHeight} - ${props.footHeight});`,
  footStyle: `height:${props.footHeight};`,
  refreshStyle: `height:${props.refreshHeight};`
})
const maxOffset = ref(0)
const scrollScreenHeight = ref(0)
const scrollFullBodyHeight = ref(0)
const refreshHeight = ref(0)
onMounted(()=>{
  //计算右边菜单的宽度
  getElementStyle('.scroll-body', (data)=>{
    console.log('scrollFullBodyHeight高度:', data.height)
    const height = data.height
    scrollFullBodyHeight.value = height
    maxOffset.value = height - scrollScreenHeight.value
  })
  getElementStyle('.page-body', (data)=>{
    console.log('scrollScreenHeight高度:', data.height)
    const height = data.height
    scrollScreenHeight.value = height
    maxOffset.value = scrollFullBodyHeight.value - height
  })
  getElementStyle('.refresh-height', (data)=>{
    console.log('refresh-height高度:', data.height)
    const height = data.height
    refreshHeight.value = height
    moveDistance.value = -height
    moveStyle.value = `transform: translateY(${-height}px)`
  })
})
const refresh = ref(false)
const moveStyle = ref('')
const moveDistance = ref(0)
const move = (e: {moveY:number})=>{
  if(refresh.value){
    console.info("刷新中,无法移动")
    return;
  }
  const maxOffsetY = maxOffset.value
  if(maxOffsetY <= 0){
    return
  }
  let currentMoveDistance = calcMoveDistance(maxOffsetY, e)
  moveStyle.value = `transform: translateY(${currentMoveDistance}px)`
  const refreshViewHeight = refreshHeight.value
  if(currentMoveDistance > -refreshViewHeight){
    refreshingStyle.value = `transform: rotate(${currentMoveDistance*3}deg);`
  }
}
const moveEnd = async (e: {moveY:number})=>{
  if(refresh.value){
    console.info("刷新中,无法移动111")
    return;
  }
  const maxOffsetY = maxOffset.value
  if(maxOffsetY <= 0){
    return
  }
  //刷新区域的高度
  const refreshViewHeight = refreshHeight.value
  let currentMoveDistance = calcMoveDistance(maxOffsetY, e)
  if(currentMoveDistance === 0){
    console.info("处于刷新区域顶点", currentMoveDistance)
    refreshCall()
    return
  }else if(currentMoveDistance > -refreshViewHeight){
    //处于刷新区域显示
    if(currentMoveDistance > - refreshHeight.value/2){
      console.info("处于刷新区域", currentMoveDistance)
      currentMoveDistance = 0
      moveStyle.value = `transform: translateY(${currentMoveDistance}px);transition: all 0.25s ease-in-out;`
      refreshCall()
      return
    }else {
      currentMoveDistance = - refreshHeight.value
      moveStyle.value = `transform: translateY(${currentMoveDistance}px);transition: all 0.25s ease-in-out;`
    }
  }
  moveDistance.value = currentMoveDistance

  // if(currentMoveDistance > 0){
  //   currentMoveDistance = 0
  //
  //   // refreshingStyle.value = "transform: rotate(360deg);transition: all 1s ease-in-out;"
  // }
  // if(currentMoveDistance > - refreshHeight.value){
  //   //刷新显示
  //   console.info('currentMoveDistance',currentMoveDistance)
  //   if(currentMoveDistance > - refreshHeight.value/2){
  //     currentMoveDistance = 0
  //     refresh.value = true
  //     moveStyle.value = `transform: translateY(${currentMoveDistance}px);transition: all 0.25s ease-in-out;`
  //   }else {
  //     currentMoveDistance = - refreshHeight.value
  //     moveStyle.value = `transform: translateY(${currentMoveDistance}px);transition: all 0.25s ease-in-out;`
  //   }
  // }
  // if(-currentMoveDistance > maxOffsetY){
  //   currentMoveDistance = -maxOffsetY
  // }
}
const calcMoveDistance = (maxOffsetY: number, e: {moveY:number}): number=>{
  const { moveY } = e
  let currentMoveDistance = moveDistance.value + moveY
  if(currentMoveDistance > 0){
    //不能大于0
    return 0
  }
  if(-currentMoveDistance > maxOffsetY){
    //不能超过maxOffsetY
    return -maxOffsetY
  }
  return currentMoveDistance
}
const refreshingStyle = ref('')

const refreshCall = async ()=>{
  refresh.value = true
  try {
    // 等待父组件回调完成
    await props.onRefresh()
  } finally {
    const currentMoveDistance = - refreshHeight.value
    moveStyle.value = `transform: translateY(${currentMoveDistance}px);transition: all 0.35s ease-out;`
    moveDistance.value = currentMoveDistance
    refresh.value = false

  }
}
</script>

<style lang="scss">
	.page-container{
    width: 750rpx;
    height: 100vh;
    background-color: #4cd964;
    display: flex;
    flex-direction: column;
    .page-head{
      background-color: blue;
      width: 100%;
      flex: none;
    }
    .page-body{
      background-color: grey;
      width: 100%;
      overflow: hidden;
      .scroll-body{
        .refresh-height{
          height: 200rpx;
          display: flex;
          align-content: center;
          justify-content: center;
          .refresh-icon{
            margin-top: 80rpx;
            width: 40rpx;
            height: 40rpx;
            background-color: #4cd964;
          }
          .refreshing{
              animation: rotate 1.5s linear infinite;
          }
        }
      }
    }
    .page-foot{
      background-color: black;
      width: 100%;
      flex: none;
    }
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
